/**
 * Description
 *
 * Creation Date 28/12/2017
 * @author Candy
 */
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import { is, fromJS} from 'immutable';
import { categories } from '../../api/index';

export default class FilterItem extends Component {
	constructor(props) {
		super(props);
		this.state = {
			filterData: [],
			curType: '',
			sortItemList: [
				{
					sort_value: 1,
					sort_name: 'Low to High'
				},
				{
					sort_value: 0,
					sort_name: 'High to Low'
				}
			]
		}
	}

	componentDidMount() {
		this.initData();
	}
	initData() {
		if( this.props.type == 'sort') {
			this.setState({ filterData: this.state.sortItemList})
		} else {
			categories(this.props.type).then(res => {
				this.setState({ filterData: res.data})
			})
		}
	}

	componentWillUpdate(nextProps, nextState) {
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state),fromJS(nextState))
	}

	render() {
		return (
			<ul className="filter-item-list">
				{
					this.state.filterData && this.state.filterData.map((item, index) => {
						switch (this.props.type){
							case 'category':
								return (<li key={index} className={ this.props.name == item.category_name ? 'selected' : ''} ><NavLink to={{
									pathname: '/category',
									search: '?categoryId='+ item.category_id + '&name=' + encodeURIComponent(item.category_name),
								}} >{item.category_name}</NavLink></li>);
							case 'brand':
								return (<li key={index} className={ this.props.name == item.brand_name ? 'selected' : ''}><NavLink to={{
									pathname: '/category',
									search: '?brandId='+ item.brand_id + '&name=' + encodeURIComponent(item.brand_name),
								}} >{item.brand_name}</NavLink></li>);
							case 'gender':
								return (<li key={index} className={ this.props.name == item.gender_name ? 'selected' : ''}><NavLink to={{
									pathname: '/category',
									search: '?genderId='+ item.gender_id + '&name=' + encodeURIComponent(item.gender_name),
								}}>{item.gender_name}</NavLink></li>);
							case 'sort':
								return ((<li key={index} className={ this.props.name == item.sort_name ? 'selected' : ''}><NavLink to={{
									pathname: '/category',
									search: '?sort='+ item.sort_value + '&name=' + encodeURIComponent(item.sort_name),
								}}>{item.sort_name}</NavLink></li>));
							default:
								return
						}
					})
				}
			</ul>
		)
	}
}
